<template>
  <el-header>
    <div class="menuWrapper">
      <el-menu
        :default-active="activeItem"
        class="el-menu-demo"
        mode="horizontal"
        router
      >
        <el-menu-item index="/">
          <i class="el-icon-s-home"></i>
          首页
        </el-menu-item>
        <el-menu-item index="/forums"
          ><i class="el-icon-guide"></i>板块</el-menu-item
        >

        <el-menu-item index="/message-center"
          ><i class="el-icon-bell"></i>消息中心</el-menu-item
        >
      </el-menu>
      <el-input
        prefix-icon="el-icon-search
"
        maxlength="20"
        v-model="input"
        ref="input"
        placeholder="搜索"
        @keydown.native.enter="search"
      ></el-input>

      <div class="info">
        <home-header-user-info></home-header-user-info>
        <div v-if="$store.state.user.isLogin" class="messageBoxWapper">
          <el-popover placement="bottom" width="400px" trigger="hover">
            <div class="message-list-wrapper">
              <ul class="message-list">
                <router-link 
                customs
                :to="{name:'reply'}"
                v-slot="{route}">
                <li class="message-item" @click="$router.push(route)">
                  回复我的<span v-if="count.msgCnt > 0" class="msg-count">{{
                    count.msgCnt | countFilter
                  }}</span>
                </li>
              </router-link>
                <!-- <li class="message-item">@我的</li> -->
                <router-link 
                customs
                :to="{name:'like'}"
                v-slot="{route}">
                <li class="message-item" @click="$router.push(route)">
                  收到的赞<span v-if="count.zanCnt > 0" class="msg-count">{{
                    count.zanCnt | countFilter
                  }}</span>
                </li>
              </router-link>
                <!-- <li class="message-item">我的消息</li> -->
              </ul>
            </div>
            <div slot="reference">
              <router-link :to="{ name: `message-center` }">
                <el-badge :is-dot="hasNewMsg">
                  <div class="messageBox">
                    <i class="el-icon-message"></i>
                    <span>消息</span>
                  </div>
                </el-badge>
              </router-link>
            </div>
          </el-popover>
        </div>
        <div v-if="$store.state.user.isLogin" class="messageBoxWapper">
          <el-popover placement="bottom" width="400px" trigger="hover">
            <div slot="reference">
              <router-link
                :to="{
                  name: `collection`,
                  params: { userId: this.userInfo.userId },
                }"
              >
                <div class="messageBox collection">
                  <i class="el-icon-collection"></i>
                  <span>收藏</span>
                </div>
              </router-link>
            </div>
            <!--抽取成单独组件-->
            <!-- <ul class="collection-list">
              <router-link v-for="c in collection.data" :key="c.id" :to="{name:'post',params:{postId:c.post.postId}}">
              <li  class="collection-item">
                <div class="avatar">
                  <avatar size="medium" :user="c.post.author"></avatar>
                </div>
                <div class="content">
                  <span class="author">{{ c.post.author.nickname }}</span>
                  <div class="title">
                    {{ c.post.title }}
                  </div>

                  <span class="time">{{c.post.createTime | dateFormat}}</span>
                </div>
              </li>
            </router-link>
            </ul> -->
            <header-collection-list></header-collection-list>
          </el-popover>
        </div>
        <div v-if="$store.state.user.isLogin" class="messageBoxWapper">
          <el-popover placement="bottom" width="400px" trigger="hover">
            <div slot="reference">
              <router-link
                :to="{
                  name: `history`,
                  params: { userId: this.userInfo.userId },
                }"
              >
                <div class="messageBox">
                  <i class="el-icon-time"></i>
                  <span>历史</span>
                </div>
              </router-link>
            </div>
            <header-view-record-list></header-view-record-list>
            <!-- <div class="history">
              <div class="history-item">
                <ul class="history-list">
                  <router-link :to="{name:`history`,params:{userId:h.post.author.userId}}" v-for="h in history.data" :key="h.recordId">
                    <div class="time-before">{{ h.viewTime | myTime }}</div>
                    <li>
                      <div class="history-list-card">
                        <div class="avatar">
                          <avatar size="medium" :user="h.post.author"></avatar>
                        </div>
                        <div class="content">
                          <div class="author">{{ h.post.author.nickname }}</div>
                          <div class="title">
                            {{ h.post.title }}
                          </div>
                          <div class="viewed-time">
                            {{ h.post.createTime | dateFormat }}
                          </div>
                        </div>
                      </div>
                    </li>
                  </router-link>
                </ul>
              </div>
            </div> -->
          </el-popover>
        </div>
      </div>
    </div>
  </el-header>
</template>

  
  <script>
import HomeHeaderUserInfo from "./HomeHeaderUserInfo.vue";
import unreadApi from "@/axios/unreadApi";
import HeaderCollectionList from "./Lists/HeaderCollectionList.vue";
import postApi from "@/axios/postApi";
import myTime from "@/filters/MyTime";
import HeaderViewRecordList from "./Lists/HeaderViewRecordList.vue";
export default {
  components: {
    HomeHeaderUserInfo,
    HeaderCollectionList,
    HeaderViewRecordList,
  },
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      input: "",
      count: {
        msgCnt: 0,
        zanCnt: 0,
      },
    };
  },
  computed: {
    activeItem() {
      return this.$route.matched[1].path;
    },
    hasNewMsg() {
      return this.count.msgCnt > 0 || this.count.zanCnt > 0;
    },
    noMore() {
      return (
        (this.postPage.current == this.postPage.pages ||
          this.postPage.pages == 0) &&
        !this.loading
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.page.current++;
      this.getList();
    },
    fetchNewMsg() {
      if (!this.isLogin) return;
      unreadApi.getUnreadReplyCount({ t: Date.now() }).then(({ data }) => {
        this.count.msgCnt = data.data;
      });
      unreadApi.getUnreadZanCount({ t: Date.now() }).then(({ data }) => {
        this.count.zanCnt = data.data;
      });
    },
    search() {
      this.$router.push({
        name: "search",
        query: { q: this.input},
      });
    },
  },
  filters: {
    countFilter(v) {
      if (v > 99) return "99+";
      return v;
    },
  },
  created() {
    this.fetchNewMsg();
  },

  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "fetchNewMsg",
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/less/common.less";
.el-header {
  width: 100%;
  padding: 0;
  border-bottom: 1px solid #dcdfe6;
}
.menuWrapper {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.el-input {
  width: 250px;
  line-height: @line-height;
  margin-left: 100px;
}

.info {
  display: flex;
  margin-left: 100px;

  .messageBoxWapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    margin-left: 35px;
  }

  .messageBox {
    color: #303133;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    cursor: pointer;
    i {
      text-align: center;
    }
    &:hover i {
      animation: animate_bounce 0.5s ease;
    }
    span {
      text-align: center;
      display: block;
      font-size: 14px;
    }
    .el-badge {
      height: auto;
      width: auto;
    }
    .iconWrapper {
      margin: 0 auto;
    }
  }

  @keyframes animate_bounce {
    50% {
      transform: translateY(-5px);
    }
    to {
      transform: translateY(0);
    }
  }
}

.message-list-wrapper {
  .message-list {
    text-align: center;
    line-height: 40px;
    color: @regularText;
    cursor: pointer;
    .message-item {
      border-radius: 5px;
    }
    .message-item:hover {
      background: @bgGray;
    }
    .msg-count {
      margin-left: 10px;
      border-radius: 20px;
      color: #fff;
      height: 100%;
      background-color: #f56c6c;
      padding: 0 5px;
    }
  }
}

.collection-list {
  height: 420px;
  overflow-y: scroll;
  .collection-item {
    display: flex;
    justify-content: space-between;
    width: 250px;
    padding: 5px;
    padding-bottom: 10px;
    border-radius: 3px;
    border-bottom: 1px solid @borderBase;
    cursor: pointer;
    &:last-child {
      border-bottom: none;
    }
    &:hover {
      background: @bgGray;
    }

    .avatar {
      margin-right: 10px;
    }
    .content {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;

      & > *:not(:last-child) {
        margin-bottom: 10px;
      }

      .title {
        height: 36px;
        line-height: 18px;
        color: @primaryText;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        word-break: break-word !important;
        word-break: break-all;
        line-break: anywhere;
        -webkit-line-clamp: 2;
      }
    }
  }
}
.history {
  width: 300px;
  overflow-y: scroll;
  max-height: 450px;
  .history-item {
    display: flex;
    flex-direction: column;
    // &:not(:last-child) {
    //   margin-bottom: 10px;
    // }
    .time-before {
      line-height: 30px;
      font-size: 14px;
      color: #000;
    }
    .history-list-card {
      display: flex;
      padding: 5px;
      border-radius: 5px;
      cursor: pointer;
      &:hover {
        background: @bgGray;
      }
      .avatar {
        margin-right: 10px;
      }
      .content {
        & > *:not(:last-child) {
          margin-bottom: 10px;
        }
        .title {
          height: 36px;
          line-height: 18px;
          color: @primaryText;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: -o-ellipsis-lastline;
          text-overflow: ellipsis;
          word-break: break-word !important;
          word-break: break-all;
          line-break: anywhere;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>